<template>
  <v-main>
    <v-container fluid fill-height>
      <v-img src=""></v-img>
      <v-row justify="end">
        <v-col xs="12" sm="8" md="5" lg="4" xl="3" class="ma-lg-16">
          <v-card>
            <v-card-title>登录</v-card-title>
            <v-card-subtitle>ZSMJ - 蛛丝马迹</v-card-subtitle>
            <v-card-text>
              <v-text-field
                  label="用户名"
                  hide-details="auto"
                  :rules="usernameRules"
                  prepend-icon="mdi-account"
                  clearable
                  v-model="loginInfo.username"
              >
              </v-text-field>
              <v-text-field
                  label="密码"
                  type="password"
                  hide-details="auto"
                  :rules="passwordRules"
                  prepend-icon="mdi-form-textbox-password"
                  clearable
                  v-model="loginInfo.password"
              >
              </v-text-field>
            </v-card-text>
            <v-card-actions>
              <v-row justify="center" class="mx-lg-10">
                <v-col>
                  <div class="text-center">
                    <v-btn
                        class="ma-2"
                        :loading="loginLoading"
                        :disabled="loginLoading"
                        color="primary"
                        @click="login"
                    >
                      登录
                      <v-icon right> mdi-login</v-icon>
                    </v-btn>
                  </div>
                </v-col>
                <v-col>
                  <div class="text-center">
                    <v-btn
                        class="ma-2"
                        :loading="loginLoading"
                        :disabled="loginLoading"
                        color="warning"
                        @click="register"
                    >
                      注册
                      <v-icon right> mdi-card-account-details-outline</v-icon>
                    </v-btn>
                  </div>
                </v-col>
              </v-row>
            </v-card-actions>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-main>
</template>

<script>
export default {
  name: "Login",

  data: () => ({
    usernameRules: [
      (value) => !!value || "请输入用户名",
      (value) => (value && value.length >= 6) || "用户名不得小于6位字符",
    ],
    passwordRules: [
      (value) => !!value || "请输入密码",
      (value) => (value && value.length >= 6) || "密码不得小于6位字符",
    ],
    loginLoading: false,
    loginInfo: {
      username: "",
      password: "",
    },
  }),
  methods: {
    login() {
    },
    register() {
    },
  },
  computed: {},
  mounted() {
  },
};
</script>

<style scoped>
</style>
